<template>
  <div>
    <!--type 1 到村  type 2 到镇  type3 村多选-->
    <el-cascader
        popper-class="address-cascader-x"
        v-model="ruleForm[field]"
        :options="Address.type1"
        :props="defaultParams1"
        clearable
        filterable
        multiple
        :style="{'width':(rowData.width?rowData.width:'100%')}"
        :placeholder="'请选择'+(rowData.label?rowData.label:rowData.name)"
        v-if="type==1"
        @change="handleChange"
    >
    </el-cascader>
    <el-cascader
        popper-class="address-cascader-x"
        v-model="ruleForm[field]"
        :options="Address.type2"
        :props="defaultParams2"
        clearable
        filterable
        multiple
        :style="{'width':(rowData.width?rowData.width:'100%')}"
        :placeholder="'请选择'+(rowData.label?rowData.label:rowData.name)"
        v-if="type==2"
        @change="handleChange"
    >
    </el-cascader>
    <el-cascader
        popper-class="address-cascader-x"
        v-model="ruleForm[field]"
        :options="Address.type1"
        :props="defaultParams3"
        clearable
        :style="{'width':(rowData.width?rowData.width:'100%')}"
        :placeholder="'请选择'+(rowData.label?rowData.label:rowData.name)"
        v-if="type==3"
        @change="handleChange"
    >
    </el-cascader>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['ruleForm','type','field','rowData'],
  data() {
    return {
      //定义级联选择器的props
      defaultParams1: {
        label: "name",
        value: "id",
        children: "children",
        checkStrictly: false,
        expandTrigger: 'click',
      },
      defaultParams2: {
        label: "name",
        value: "id",
        children: "children",
        checkStrictly: false,
        expandTrigger: 'click',
      },
      defaultParams3: {
        label: "name",
        value: "id",
        children: "children",
        multiple: true
      },
    };
  },
  mounted() {
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  },
};
</script>
<style>
.address-cascader-x .el-cascader-menu__wrap{
  margin-bottom: 0 !important;
  overflow-x: hidden !important;
}
</style>
<style lang="scss" scoped></style>
